/*
 * @Author: kanglang
 * @Date: 2020-10-12 14:46:29
 * @LastEditors: kanglang
 * @LastEditTime: 2021-06-08 18:16:28
 * @Description: 自定义输入框
 */
import React, { useState, useRef, useEffect } from 'react';
import {
  StyleSheet, TextInput, View, Image, Platform, TouchableOpacity,
} from 'react-native';
import { px2dp, screenWidth, } from '@/styles';
import { iconClearGray, hidePwd, displayPwd } from '@/images';

const XmInput = ({
  basicStyle,
  inputStyle,
  onChange,
  placeholder,
  placeholderTextColor,
  editable = true,
  name,
  multiline,
  maxLength,
  keyboardType,
  isPwd = false,
  defaultValue,
  leftIcon,
  onClear
}) => {
  const [mobile, setMobile] = useState('');
  const [isClear, setIsClear] = useState(false);
  const [isPwdShow, setPwdIcon] = useState(false);
  const inputElement = useRef(null);

  const onChangeText = (value, callback) => {
    setMobile(value);
    if (
      value.length > 0 &&
      name === 'mobile' &&
      name !== 'password' &&
      name !== 'confirmPassword' &&
      name !== 'oldPassword'
    ) {
      setIsClear(true);
    } else {
      setIsClear(false);
    }
    if ((name === 'mobile' && value.length === 11)
      || (name === 'code' && value.length === 4)) {
      inputElement.current.blur();
    }
    callback && callback(name, value);
  };

  const maxLengthIf = () => {
    if (name === 'mobile') {
      return 11;
    } if (name === 'code') {
      return 4;
    }
    return maxLength;
  };

  const keyBordType = () => {
    if (name === 'mobile' || name === 'code') {
      return Platform.OS === 'android' ? 'numeric' : 'number-pad';
    }
    return keyboardType;
  };

  const delValue = () => {
    setMobile('');
    onClear && onClear();
    inputElement.current.clear();
  };

  useEffect(() => {
    if (mobile <= 0 &&
      (name !== 'password' || name !== 'confirmPassword' || name !== 'oldPassword')) {
      setIsClear(false);
    }
  });

  return (
    <View style={[styles.container, basicStyle]}>
      {
        leftIcon && (
          <Image
            style={styles.rightIcon}
            resizeMode='stretch'
            source={leftIcon}
          />
        )
      }
      <TextInput
        defaultValue={defaultValue}
        style={[styles.textInput, inputStyle]}
        editable={editable}
        ref={inputElement}
        placeholder={placeholder}
        placeholderTextColor={placeholderTextColor || '#CDCCC9'}
        maxLength={maxLengthIf()}
        keyboardType={keyBordType()}
        underlineColorAndroid='transparent'
        multiline={multiline}
        secureTextEntry={(name === 'password' || name === 'confirmPassword' || name === 'oldPassword') && !isPwdShow}
        onChangeText={(text) => onChangeText(text, onChange)}
      />
      {
        (name === 'password' || name === 'confirmPassword' || name === 'oldPassword') && isPwd &&
        <TouchableOpacity
          style={styles.clearBox}
          onPress={() => setPwdIcon(!isPwdShow)}
        >
          <Image
            style={styles.rightIcon}
            resizeMode='stretch'
            source={isPwdShow ? displayPwd : hidePwd}
          />
        </TouchableOpacity>
      }
      {
        isClear && name !== 'code' && (
          <TouchableOpacity
            style={styles.clearBox}
            onPress={() => delValue()}
          >
            <Image
              style={styles.rightIcon}
              resizeMode='stretch'
              source={iconClearGray}
            />
          </TouchableOpacity>
        )
      }
    </View>
  );
};
export default XmInput;

const styles = StyleSheet.create({
  container: {
    width: screenWidth - 32,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
    borderRadius: 8,
    borderBottomWidth: px2dp(1),
    borderBottomColor: '#E6E6E5',
  },
  textInput: {
    flex: 1,
    height: px2dp(96),
    fontSize: px2dp(32),
    paddingLeft: px2dp(24),
    color: '#333232'
  },
  clearBox: {
    width: px2dp(96),
    height: px2dp(96),
    justifyContent: 'center',
    alignItems: 'center',
  },
  rightIcon: {
    width: px2dp(32),
    height: px2dp(32),
  },

});
